<template>
  <div id="app">
    <router-view />
    <!-- <div class="fps-box">{{ this.frameRate.toFixed(1) }} fps</div> -->
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      frameCount: 0,
      frameRate: 0,
      lastTime: performance.now()
    }
  },
  methods: {
    updateFrameRate () {
      const currentTime = performance.now();
      const deltaTime = currentTime - this.lastTime;
      this.frameCount++;

      if (deltaTime >= 100) {
        this.frameRate = (this.frameCount / deltaTime) * 1000;
        this.frameCount = 0;
        this.lastTime = currentTime;
      }
      requestAnimationFrame(this.updateFrameRate);
    },
    // 判断是否有对应数据源，没有则创建一个
    createDatasource () {
      if (window.filesRoot.length == 0) {
        return
      }
      try {
        let requests = []
        window.filesRoot.forEach(item => {
          requests.push(axios.post(`${window.mapServerIp}/${window.prefix}/datasource/register`, {
            config: item,
            name: `测试_${item.split('\\').slice(-1)[0]}_${new Date().getTime()}`,
            password: '',
            remark: '',
            type: "raster",
            typeCode: "0103",
            user: ''
          }))
        })
        Promise.all(requests).then((res) => {
          let errorMsg = ''
          res.forEach(item => {
            if (item.data.status !== 200 && item.data.status !== 1003) {
              errorMsg += item.data.msg + '; '
            } else if (item.data.status == 200) {
              let path = JSON.parse(item.config.data).config
              // this.checkRasterDataSource(encodeURIComponent(path))
            }
          })
          if (errorMsg) {
            this.$message.error(errorMsg)
          }
          axios.get(`${window.mapServerIp}/${window.prefix}/timer/checkRasterDataSource`)
        })
      } catch (error) {
        console.error(error)
      }
    }
  },
  mounted () {
    // requestAnimationFrame(this.updateFrameRate);
    this.createDatasource()
  }
}
</script>
<style lang="less">
#app {
  width: 100%;
  height: 100%;
  color: #2c3e50;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .fps-box {
    width: 70px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    position: fixed;
    right: 10px;
    top: 10px;
    background: linear-gradient(rgb(84, 183, 227) 0px, rgb(135, 242, 226) 100%);
    color: #fff;
    font-weight: 700;
  }
}
</style>
